<template>
  <header class="header can-sticky">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="inner">
            <!-- Logo -->
            <div class="logo">
              <NuxtLink to="/" class="d-flex h-100">
                <img src="../assets/images/logo-3.png" alt="logo" class="image-fit-contain" />
              </NuxtLink>
            </div>
            <!-- Logo -->
            <!-- Nav -->
            <TheNavigation :class="['navigation', { open: isMenuOpen }]" />
            <!-- Nav -->
            <MobileNav v-model="isMenuOpen" />
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- Header End -->
  <!-- Subheader Start -->
  <div class="section-bg section-padding subheader" :style="{ backgroundImage: `url(${subheader})` }">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <h2 class="text-white page-title">{{ t("nav.contact") }}</h2>
        </div>
      </div>
    </div>
  </div>
  <!-- Subheader End -->
  <!-- Contact Start -->
  <section class="section-padding">
    <div class="container">
      <div class="col-lg-5 mx-auto">
        <div class="h-100 contact_info thm-bg-color-two">
          <div class="section-header">
            <h3 class="title text-white">联系方式</h3>
          </div>
          <div class="footer">
            <ul class="ft_contact ft_menu">
              <li>
                <a href="#">
                  <i class="fas fa-phone-volume"></i>
                  0034 678667226 ｜ 0034 605844248
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="fas fa-envelope"></i>
                  info@aecti.com
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="fas fa-map-marker-alt"></i>
                  Calle Diputació 246 BARCELONA
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Contact End -->
  <!-- Footer Start -->
  <TheFooter />

  <!-- Footer End -->
  <!-- Copyright Start -->
  <div class="thm-bg-color-one copyright">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <p class="mb-0">
            Copyright © <span id="year"></span>.
            <a target="_blank" href="#" title=" 科技创新院" class="text-white"> 科技创新院</a>
          </p>
        </div>
      </div>
    </div>
  </div>
  <!-- Copyright End -->
  <a href="#" data-target="html" class="back-to-top ft-sticky" style="">
    <i class="fal fa-long-arrow-up"></i>
  </a>
</template>
<script setup>
import subheader from "../assets/images/subheader.jpg";
import TheNavigation from "../component/TheNavigation.vue";
import TheFooter from "~/component/TheFooter.vue";
import MobileNav from "~/component/MobileNav.vue";
const { t } = useI18n();

const isMenuOpen = ref(false);
</script>
